<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
    <title>气泡图</title>
    <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
    	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/l7.js"></script>
 <style>
	#map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
<script>
  var scene = new L7.Scene({
    id: 'map',
    mapStyle: 'light', // 样式URL
    center: [120.19382669582967, 30.258134],
    pitch: 0,
    minZoom:5,
    maxZoom:15,
    zoom: 3
  });
  window.scene = scene;
  scene.on('loaded',()=>{
  $.getJSON('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json', city => {
  const labeldata = city.features.map(fe=>{
    return fe.properties
  })
  const layer = scene.PolygonLayer()
    .source(city)
    .color('unit_price',['#b2182b','#ef8a62','#fddbc7','#d1e5f0','#67a9cf','#2166ac'].reverse())
    .shape('fill')
    .active(true)
    .style({
      opacity: 1
    })
    .render()
     const layer2= scene.PolygonLayer()
    .source(city)
    .color('#fff')
    .shape('line')
    .style({
      opacity: 1
    })
    .render()
    layer.fitBounds();
    scene.PointLayer({
      zIndex: 5
    })
     .source(labeldata,{
       parser:{
         type:'json',
         x:'longitude',
         y:'latitude'
       }
     })
    .shape('name', 'text')
    .size(20)
    .color('#000')
    .style({
      // fontFamily: 'Monaco, monospace', // 字体
      fontWeight: 200,
      textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
      textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
      spacing: 2, // 字符间距
      padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
      stroke: '#fff', // 描边颜色
      strokeWidth: 4, // 描边宽度
      opacity: 1.0
    })
    .render();
})
})
</script>